<template>
  <div class="add-uav-inbound-bg">
    <div class="back-btn-bar">
      <el-button class="back-btn" type="primary" link @click="goBackToInbound">
        <el-icon>
          <ArrowLeft />
        </el-icon> 返回入库管理
      </el-button>
    </div>
    <div class="add-uav-inbound-page">
      <div class="page-header">
        <h2 class="page-title">无人机入库</h2>
        <p class="page-desc">
          请填写无人机入库信息，带 <span class="required">*</span> 为必填项
        </p>
      </div>
      <el-form :model="form" label-width="120px" class="add-form" :rules="rules" ref="formRef">
        <el-form-item label="无人机ID" prop="id" class="form-item" v-if=false>
          <el-input v-model="form.id" placeholder="请输入无人机ID" class="form-input" maxlength="50" show-word-limit />
        </el-form-item>
        <el-form-item label="无人机" prop="id" class="form-item">
          <el-input v-model="form.name" class="form-input" show-word-limit aria-readonly="true" disabled />
        </el-form-item>
        <el-form-item label="是否需要维护" prop="isMaintenance" class="form-item">
          <el-select v-model="form.isMaintenance" placeholder="请选择">
            <el-option label="不需要" value="0" />
            <el-option label="需要" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item class="form-actions">
          <el-button type="primary" @click="submit" class="submit-btn">
            <i class="el-icon-check"></i> 提交
          </el-button>
          <el-button @click="goBack" class="cancel-btn">
            <i class="el-icon-arrow-left"></i> 取消
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import axios from "axios";
import { ArrowLeft } from "@element-plus/icons-vue";

const router = useRouter();
const route = useRoute();
const formRef = ref(null);
const form = ref({
  id: "",
  isMaintenance: "0",
});

const rules = {
  id: [
    { required: true, message: "请输入无人机ID", trigger: "blur" },
    { min: 2, max: 50, message: "ID长度在2-50个字符之间", trigger: "blur" },
  ],
  isMaintenance: [
    { required: true, message: "请选择是否需要维护", trigger: "change" },
  ],
};

onMounted(() => {
  // 从路由参数中获取无人机ID并回显
  if (route.query.uavId) {
    form.value.id = route.query.uavId;
    form.value.name = route.query.uavName;
  }
});

const submit = async () => {
  await formRef.value.validate();
  const formData = new FormData();
  formData.append("id", form.value.id);
  formData.append("isMaintenance", form.value.isMaintenance);
  try {
    const res = await axios.post(
      "/tielingpowergriduavservice/uav/update",
      formData
    );
    if (res.data.code === 200) {
      ElMessage.success("入库成功");
      router.push({ name: "DroneWarehouseHome", query: { tab: "inbound" } });
    } else {
      ElMessage.error("入库失败：" + res.data.msg);
    }
  } catch (e) {
    ElMessage.error("请求异常：" + e.message);
  }
};

const goBack = () => {
  if (form.value.id || form.value.isMaintenance !== "0") {
    ElMessageBox.confirm("当前表单内容未保存，确定要离开吗？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        router.back();
      })
      .catch(() => { });
  } else {
    router.back();
  }
};

const goBackToInbound = () => {
  router.push({ name: "DroneWarehouseHome", query: { tab: "inbound" } });
};
</script>

<style scoped>
.add-uav-inbound-bg {
  min-height: 100vh;
  width: 100vw;
  background: linear-gradient(135deg, #e0f7fa 0%, #f8fafc 60%, #d1e9fc 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.back-btn-bar {
  position: absolute;
  top: 50px;
  left: 50px;
}

.back-btn {
  background-color: #199893 !important;
  border-color: #199893 !important;
  color: #fff !important;
  padding: 10px 20px;
}

.back-btn:hover {
  background-color: #12706b !important;
  border-color: #12706b !important;
}

.add-uav-inbound-bg::before {
  content: "";
  position: absolute;
  left: -100px;
  top: 80px;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle,
      #b2ebf2 0%,
      #e0f7fa 80%,
      transparent 100%);
  border-radius: 50%;
  z-index: 1;
  opacity: 0.5;
}

.add-uav-inbound-bg::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: 60px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle,
      #90caf9 0%,
      #d1e9fc 80%,
      transparent 100%);
  border-radius: 50%;
  z-index: 1;
  opacity: 0.4;
}

.add-uav-inbound-page {
  max-width: 800px;
  margin: 0 auto;
  background: #fff;
  padding: 38px 48px 32px 48px;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(44, 62, 80, 0.13);
  position: relative;
  z-index: 2;
}

.page-header {
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 1px solid #f1f5f9;
}

.page-title {
  font-size: 22px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0 0 10px 0;
  display: flex;
  align-items: center;
}

.page-title::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 20px;
  background-color: #199893;
  margin-right: 10px;
  border-radius: 2px;
}

.page-desc {
  font-size: 14px;
  color: #7f8c8d;
  margin: 0;
}

.required {
  color: #e74c3c;
  font-weight: bold;
}

.add-form {
  width: 100%;
}

.form-item {
  margin-bottom: 25px;
  transition: all 0.3s;
}

.form-input {
  width: 100%;
  height: 42px;
  border-radius: 6px;
  border-color: #e2e8f0;
  transition: all 0.3s;
}

.form-input:focus {
  border-color: #199893;
  box-shadow: 0 0 0 3px rgba(25, 152, 147, 0.1);
}

.form-actions {
  margin-top: 40px;
  margin-left: 80px;
  padding-top: 20px;
  border-top: 1px solid #f1f5f9;
  display: flex;
  justify-content: flex-start;
  gap: 15px;
}

.submit-btn {
  background-color: #199893;
  border-color: #199893;
  padding: 8px 24px;
  font-size: 14px;
}

.submit-btn:hover {
  background-color: #12706b;
  border-color: #12706b;
}

.cancel-btn {
  padding: 8px 24px;
  font-size: 14px;
  color: #7f8c8d;
  background-color: #f8fafc;
  border-color: #e2e8f0;
}

.cancel-btn:hover {
  background-color: #f1f5f9;
  color: #64748b;
  border-color: #cbd5e1;
}

@media (max-width: 768px) {
  .add-uav-inbound-page {
    margin: 15px;
    padding: 20px 15px;
  }

  .form-actions {
    flex-direction: column;
    margin-left: 0;
  }

  .submit-btn,
  .cancel-btn {
    width: 100%;
  }
}
</style>
